<template>
	<view class="home-container">
		<!-- 搜索导航 -->
		<NavBar></NavBar>
		<!-- 选项卡片 -->
		<TabBar @changeActive="changeActiveIndex" :index="isIndex" :tabList="labelList"></TabBar>
		<ArticleList @changeCurrent="changeActiveIndex" :index="isIndex" :labelList="labelList" class="list-container">
		</ArticleList>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		onLoad() {
			this.getDataList()
		},
		data() {
			return {
				isIndex: 0
			}
		},
		computed: {
			...mapState(['userInfo']),
			labelList() {

				if (this.userInfo) {
					this.isIndex = 0
					return [...this.$store.state.labelList.slice(0, 1),
						...this.$store.state.labelList.filter(item => this.userInfo.labelList_likes_ids.includes(item
							._id))
					]
				} else {
					return this.$store.state.labelList
				}
			}
		},
		methods: {
			...mapMutations(["setLabelList"]),
			async getDataList() {
				if (this.labelList.length) return
				// 获取卡片数据
				const res = await this.$http.getLabelList()
				this.setLabelList([{
					name: '全部',
					user: []
				}, ...res])
			},
			changeActiveIndex(index) {
				this.isIndex = index;

			},

		},

	}
</script>

<style lang="scss">
	page {
		display: flex;
		height: 100%;
	}

	.home-container {
		flex: 1;
		overflow: hidden;
		box-sizing: border-box;
		@include flex(flex-start, column) align-items: inherit;
	}

	.list-container {
		flex: 1;
		box-sizing: border-box;
	}
</style>
